@import "../sass/公共类.scss";

.content {
    .header {
        .h-right {
            margin: auto 0;
            position: relative;
            img {
                &:first-of-type {
                    width: footerVw(70);
                }
            }
            span {
                width: footerVw(30);
                height: footerVw(30);
                color: white;
                font-size: footerVw(20);
                line-height: footerVw(30);
                text-align: center;
                display: inline-block;
                background: rgb(233, 49, 49);
                border-radius: footerVw(15);
                position: absolute;
                right: footerVw(0);
                top: footerVw(-15);
            }
        }
    }
    .subject {
        width: footerVw(710);
        margin: 0 footerVw(20);
        .headSculpture {
            @include flex();
            .h-left {
                img {
                    width: footerVw(180);
                }
            }
            .h-center {
                width: footerVw(460);
                margin: auto 0;
                span {
                    display: block;
                    height: footerVw(80);
                    line-height: footerVw(80);
                    // background: chartreuse;
                    &:first-of-type {
                        font-size: footerVw(36);
                    }
                    &:last-of-type {
                        font-size: footerVw(30);
                        color: rgb(143, 142, 142);
                    }
                }
            }
            .h-right {
                margin: auto 0;
                span {
                    font-size: footerVw(100);
                }
            }
        }
        .MyRecord {
            @include flex();
            div {
                width: footerVw(205);
                text-align: center;
                margin: footerVw(20) 0;
                padding: footerVw(20) 0;
                &:first-of-type {
                    background: rgb(178, 224, 160);
                }
                &:nth-of-type(2) {
                    background: rgb(160, 220, 224);
                }
                &:last-of-type {
                    background: rgb(224, 183, 160);
                }
                img {
                    width: footerVw(80);
                    height: footerVw(80);
                    &:last-of-type {
                        width: footerVw(120);
                    }
                }
                span {
                    display: block;
                    font-size: footerVw(30);
                }
            }
        }
        .MoreInformation {
            margin-top: footerVw(20);
            ul {
                li {
                    @include flex();
                    margin: footerVw(50) 0;
                    .left {
                        width: footerVw(275);
                        @include flex();
                        line-height: footerVw(70);
                        position: relative;
                        img {
                            height: footerVw(70);
                        }
                        span {
                            font-size: footerVw(30);
                            position: absolute;
                            left: footerVw(120);
                        }
                    }
                    .right {
                        width: footerVw(100);
                        @include flex();
                        line-height: footerVw(70);
                        span {
                            color: black;
                            font-size: footerVw(28);
                        }
                        img{
                            width: footerVw(30);
                            height: footerVw(30);
                            margin: auto 0;
                        }
                    }
                    &:first-of-type {
                        div {
                            &:first-of-type {
                                img {
                                    width: footerVw(50);
                                }
                            }
                        }
                    }
                    &:nth-of-type(2) {
                        div {
                            &:first-of-type {
                                img {
                                    width: footerVw(70);
                                }
                            }
                        }
                    }
                    &:nth-of-type(3) {
                        div {
                            &:first-of-type {
                                img {
                                    width: footerVw(100);
                                }
                            }
                        }
                    }
                    &:nth-of-type(4) {
                        div {
                            &:first-of-type {
                                img {
                                    width: footerVw(70);
                                }
                            }
                        }
                    }
                    &:nth-of-type(5) {
                        margin-top: footerVw(80);
                        div {
                            &:first-of-type {
                                img {
                                    width: footerVw(70);
                                }
                            }
                        }
                    }
                    &:last-of-type {
                        div {
                            &:first-of-type {
                                img {
                                    width: footerVw(90);
                                }
                            }
                        }
                    }
                }
            }
        }
        .last {
            display: flex;
            justify-content: space-around;
            margin-bottom: footerVw(40);
            button {
                width: footerVw(150);
                height: footerVw(80);
                font-size: footerVw(28);
                color: white;
                background: $orangeColor;
                border-radius: footerVw(40);
            }
        }
    }
}